<template>
    <div class="good-item">
        <div class="list-item">
            <div class="content">
                <div class="list-image">
                    <img src="https://www.unionrepair.com/images/thumbnails/189/189/detailed/5/ipad-air-touch-screen-assembly-black-r1.jpg"
                         alt="Replacement for iPad Air Touch Screen Assembly - Black"
                         title="Replacement for iPad Air Touch Screen Assembly - Black">
                    <span class="discount-label">
                        <span class="span-item color">Save<br><em>5%</em></span></span>
                </div>
                <el-rate style="text-align: center;" v-model="rate" disabled/>
                <div class="list-item-name">
                    <a>Replacement For iPhone X LCD Screen Digitizer Assembly with Frame - Black</a>
                </div>
                <div class="list-item-price">
                    <span class="price">
                        <span class="price-number">$</span><span class="price-number">380</span>
                    </span>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "ep-good-cell-item",
        props:{
            rate:{
                type:Number,
                default:4,
            }
        }
    }
</script>

<style scoped lang="scss">
    .el-rate__icon {
        font-size: 13px;
    }
    .good-item {
        width: 197px;
        .list-item {
            padding-top: 3px;
            position: relative;
            background-color: white;
            min-height: 324px;

            .content {
                border: 0 solid #eeeff2;
                padding: 15px;
                /*border: 1px solid #eeeff2;*/
                background: #fff;
                display: block;
                width: 100%;
                box-sizing: border-box;
                .list-image {
                    display: inline-block;
                    overflow: hidden;
                    width: 100%;
                    border: 0 none;
                    padding: 0;
                    background: #fff;
                    position: relative;
                    text-align: center;
                    min-height: 50px;
                    img {
                        border: 0;
                        max-width: 100%;
                        height: auto;
                        vertical-align: middle;
                        font-size: 0;
                    }
                    .discount-label {
                        position: absolute;
                        left: 0;
                        top: 0;
                        background: transparent;
                        list-style: none;
                        text-align: center;
                        z-index: 1;
                        .color {
                            background: #0099e5;
                        }
                        .span-item {
                            width: 32px;
                            height: 20px;
                            float: left;
                            font-weight: normal;
                            font-size: 8px;
                            line-height: 100%;
                            white-space: nowrap;
                            padding: 11px 5px;
                            color: rgba(255, 255, 255, 0.8);
                            text-transform: uppercase;
                            border-radius: 100%;
                        }
                    }
                }
                &:hover {
                    position: absolute;
                    z-index: 2;
                    border: 1px solid #d1d4dc;
                    box-shadow: 0 0 6px 0 #d1d4dc;
                    .list-item-name {
                        height: auto;
                        min-height: 30px;
                    }
                }
                .list-item-name {
                    display: block;
                    margin: 0;
                    text-align: left;
                    height: 30px;
                    width: 100%;
                    max-width: 100%;
                    line-height: 15px;
                    padding: 5px 0 0 0;
                    margin-bottom: 5px;
                    overflow: hidden;
                     .product-title {
                         color: #525558;
                         font-size: 13px;
                         display: inline;

                     }
                    a {

                    }
                }
                .list-item-price {
                    display: block;
                    text-align: left;
                    vertical-align: top;
                    margin: 5px 0 0 0;
                    max-width: 100%;
                    height: 38px;
                    .price {
                        .price-number {
                            font-family: MuseoSansBlack,sans-serif;
                            font-size: 20px;
                            font-weight: normal !important;
                            letter-spacing: -0.05em;
                            padding-right: 0;
                        }
                    }
                }
            }
        }
    }
</style>